<template>
  <div class="vedioContent">
    <div class="vedioList" v-for="vedio in vedioList" :key="vedio.sourceId">
      <a-tooltip  placement="top"  overlayClassName="hoverCard" >
        <video class="vedio" @click="upVedio(vedio.url)">
          <source :src="vedio.url" type="video/mp4" />
        </video>
        <template slot="title">
          <p>视频大小:{{vedio.size}}"</p>
          <p v-if="vedio.date">录制日期:{{vedio.date}}"</p>
        </template>
      </a-tooltip>
      <div>
        <div class="describe">
          <p>
            {{ vedio.sourceName }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import * as TransformSize from "@/utils/transform";

export default {
  data() {
    return {
      // 加载
      spinStatus: false,
    };
  },
  computed: {
    vedioList() {
      return this.resourceList.filter((resource) => {
        return resource.rsType == "mp4";
      });
    },
    ...mapGetters({
      resourceList: "teacher/resourceList",
    }),
  },
  created() {
    this.TransformFileSize();
  },
  mounted() {
    console.log(this.vedioList);
  },
  methods: {
    upVedio(url) {
      window.open(url);
    },
    TransformFileSize() {
      this.vedioList.forEach((vedio) => {
        vedio.size = TransformSize.tranformFileSizeTOKB(vedio.size);
      });
    },
  },
};
</script>
<style scoped>
.vedioContent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.vedioList {
  width: 150px;
  height: 100px;
  padding: 0px 0px;
  margin: 10px 10px;
  /* background:black; */
}
.vedio {
  width: 150px;
  height: 90px;
  display: block;
  background-image: url("../../../../assets/img/video/notLiving.jpg");
  background-size: 150px 90px;
  cursor: pointer;
}
.describe {
  text-align: center;
  padding: 0;
}
/* 悬浮卡片样式 */
.hoverCard{
  width: 150px;
  height:80px;
  font-size: 12px;
}
.describe >p{
  /* 溢出文本处理 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>